<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>数据统计</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		body{
			background: #e9e9e9;
		}
		/*公共头部带搜索*/
		.public_container{
			margin: 20px;
			background: #fff;
		}
		.public_title_container{
			height: 54px;
			padding: 0 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			background: #f9f9f9;
			border-bottom: 1px solid #f0f0f0;
		}
		.public_buttonSearch_container{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			background: #fff;
		}
		.public_buttonSearch_container a{
			color: #fff;
			background-color: #1E9FFF;
			text-shadow: 0 -1px 0 rgba(0,0,0,.12);
			height: 24px;
			padding: 4px 15px;
			font-size: 14px;
			border-radius: 2px;
			display: flex;
			align-items: center;
		}
		.public_Search_container{
			position: relative;
		}
		.public_Search_container input{
			width: 240px;
			height: 32px;
			border: 1px solid #d9d9d9;
		}
		.public_Search_container i{
			position: absolute;
			bottom: 6px;
			right: 10px;
			cursor: pointer;
		}
		/*图表部分*/
		/*图标头部一行*/
		.public_statistics_contaienr{
			padding: 20px;
		}
		.public_statisticsHeader_contaienr{
			margin-bottom: 20px;
			display: flex;
			justify-content: space-between;
		}
		/*tabs*/
		.layui-this{
			color: #1E9FFF !important;
			background: #fff !important;
		}
		.tabs_container{
			display: flex;

		}
		.tabs_container li{
			flex: 1;
			background: #fafafa;
			margin-right: 5px;
			border: 1px solid #e6e6e6;
			border-bottom: none;
		}
		.tabs_container li:last-child{
			margin-right: 0px;
		}
		.layui-this{
			border: none !important;
		}
		/*上半部分数据统计*/
		.statistics_header_container{
			display: flex;
			    padding: 20px 20px 10px;
			    margin-bottom: 20px;
			    box-shadow: 0 1px 2px rgba(0,0,0,.05);
			    border-radius: 2px;
			    background: #fff;
		}
		.statistics_headerYesterdayData_container{
			    flex: 2;
    padding-right: 16px;
		}
		.statistics_headerpublicData_container h3{
			font-size: 14px;
			    margin-bottom: 16px;
			    font-weight: bold;
			    color: rgba(0,0,0,0.85);
		}
		.statistics_headerCumulativeData_container h3{
			padding-left: 16px;
		}
		.statistics_headerpublicData_content{
			display: flex;
			
		}
		.statistics_headerpublicData_content li{
			display: flex;
			padding:14px 16px;
			margin:8px;
			flex: 1;
		}
		.statistics_headerpublicData_content li:first-child{
			margin-left: 0;
		}
		.statistics_headerpublicData_content li:last-child{
			margin-right: 0;
		}
		.statistics_headerpublicData_content li img{
			width: 40px;
			height: 40px;
			padding-right: 20px;
		}
		.statistics_headerpublicData_right_container{
			display: flex;
			flex-direction: column;
		}
		.statistics_headerpublicData_right_container span:first-child{
			font-size: 14px;
			color: rgba(0,0,0,0.65);
			margin-bottom: 5px;
		}
		.statistics_headerpublicData_right_container span:last-child{
			font-size: 22px;
			color: rgba(0,0,0,0.85);
		}
		.statistics_headerCumulativeData_container{
			flex: 3;
		}
		.statistics_headerCumulativeData_content{
			border-left: 1px solid #f0f0f0;
			padding-left: 10px;
		}
/*		.statistics_headerpublicData_container{

		}
		.statistics_headerpublicData_content{

		}
		.statistics_headerpublicData_right_container{

		}*/
	</style>
</head>
<body>
	<div class="public_container">
		<div class="statistics_header_container">
			<div class="statistics_headerYesterdayData_container statistics_headerpublicData_container">
				<h3>今日数据</h3>
				<ul class="statistics_headerYesterdayData_content statistics_headerpublicData_content">
					<li style="background: rgba(255, 145, 103, 0.1);">
						<img src="http://weidogstest.oss-cn-beijing.aliyuncs.com/f24289849f49141474abf159d9f1409f.png">
						<div class="statistics_headerYesterdayData_right_container statistics_headerpublicData_right_container">
							<span>新增客户数</span>
							<!--<span id="yy_new_contact_cnt">0</span>-->
							<span>{$todayAddNum}</span>
						</div>
					</li>
					<li style="background: rgba(84, 101, 255, 0.1);">
						<img src="http://weidogstest.oss-cn-beijing.aliyuncs.com/27d28c5030d58f6a1c87aff86582ecae.png">
						<div class="statistics_headerYesterdayData_right_container statistics_headerpublicData_right_container">
							<span>流失客户数</span>
							<!--<span id="yy_negative_feedback_cnt">0</span>-->
							<span>{$todayLossNum}</span>
						</div>
					</li>
				</ul>
			</div>
			
			<div class="statistics_headerCumulativeData_container statistics_headerpublicData_container">
				<h3>累计数据</h3>
				<ul class="statistics_headerCumulativeData_content statistics_headerpublicData_content">
					<li style="background: rgba(25, 209, 142, 0.1); margin-left: 6px;">
						<img src="http://weidogstest.oss-cn-beijing.aliyuncs.com/baed8e1de70768f00498c7d6590024e4.png">
						<div class="statistics_headerCumulativeData_right_container statistics_headerpublicData_right_container">
							<span>客户总数</span>
							<span>{$etNum}</span>
						</div>
					</li>
					<li style="background: rgba(19, 199, 239, 0.1);">
						<img src="http://weidogstest.oss-cn-beijing.aliyuncs.com/ffa70ed4d932a2f6fefc1f60c84af247.png">
						<div class="statistics_headerCumulativeData_right_container statistics_headerpublicData_right_container">
							<span>客户群总数</span>
							<span>{$groupchatNum}</span>
						</div>
					</li>
					<li style="background: rgba(175, 103, 255, 0.1);">
						<img src="http://weidogstest.oss-cn-beijing.aliyuncs.com/cf3213dc7ba7b8f0927ed0f54fddd192.png">
						<div class="statistics_headerCumulativeData_right_container statistics_headerpublicData_right_container">
							<span>群成员总数</span>
							<span>{$groupchatuserNum}</span>
						</div>
					</li>
				</ul>
			</div>

		</div>
	</div>
	<form class="layui-form">
		
		<div class="public_container">
			<!-- /*公共头部带搜索*/ -->
			<div class="public_content">
				<div class="public_title_container">
					<p>数据统计</p>
				</div>
			</div>
			<!-- /*公共头部带搜索*/ end -->
			<div class="public_statistics_contaienr">
				<div class="public_statisticsHeader_contaienr">
					<div class="public_statisticsHeaderLeft_contaienr">
						<div class="layui-inline">
							<button type="button" class="layui-btn layui-btn-primary" onclick="one_week()">近1周</button>
						</div>
						<div class="layui-inline">
							<button type="button" class="layui-btn layui-btn-primary" onclick="two_week()">近2周</button>
						</div>
						<div class="layui-inline">
							<button type="button" class="layui-btn layui-btn-primary" onclick="one_month()">近1月</button>
						</div>
						<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
							<input type="text" class="layui-btn layui-btn-primary" id="test1" placeholder="请选择开始日期">
						</div>
						<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
							<input type="text" class="layui-btn layui-btn-primary" id="test2" placeholder="请选择结束日期">
						</div>
					</div>
					<!--<div class="public_statisticsHeaderRight_contaienr">
						<div class="layui-input-inline">
							<select name="city" lay-verify="required">
								<option value="">全部成员</option>
								<option value="0">北京</option>
								<option value="1">上海</option>
								<option value="2">广州</option>
								<option value="3">深圳</option>
								<option value="4">杭州</option>
							</select>
						</div>
					</div>-->
				</div>
				<div class="layui-tab">
				  <ul class="layui-tab-title tabs_container">
				    <li class="layui-this">客户分析</li>
				    <li>聊天总数</li>
				    <li>发送消息数</li>
				    <li>已回复聊天占比</li>
				    <li>平均首次回复时长</li>
				  </ul>
				  <div class="layui-tab-content">
				    <div class="layui-tab-item layui-show">
				    	<div id="main1" style="width: 100%;height:400px;"></div>
				    </div>
				    <div class="layui-tab-item layui-show">
						<div id="main2" style="width: 100%;height:400px;"></div>
					</div>
				    <div class="layui-tab-item layui-show">
						<div id="main3" style="width: 100%;height:400px;"></div>
					</div>
				    <div class="layui-tab-item layui-show">
						<div id="main4" style="width: 100%;height:400px;"></div>
					</div>
				    <div class="layui-tab-item layui-show">
						<div id="main5" style="width: 100%;height:400px;"></div>
					</div>
				  </div>
				</div>
			</div>
		</div>
	</form>
	
	<script src="/cdn/echarts.min.js"></script>
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			$('.layui-this').trigger('click');
		};
		function edit_chart(data){
			var option1 = myChart1.getOption();
			option1.xAxis[0].data = data.statistics_date;
			option1.series[0].data = data.new_contact_cnt;
			option1.series[1].data = data.new_apply_cnt;
			option1.series[2].data = data.negative_feedback_cnt;
			myChart1.setOption(option1);
			var option2 = myChart2.getOption();
			option2.xAxis[0].data = data.statistics_date;
			option2.series[0].data = data.chat_cnt;
			myChart2.setOption(option2);
			var option3 = myChart3.getOption();
			option3.xAxis[0].data = data.statistics_date;
			option3.series[0].data = data.message_cnt;
			myChart3.setOption(option3);
			var option4 = myChart4.getOption();
			option4.xAxis[0].data = data.statistics_date;
			option4.series[0].data = data.reply_percentage;
			myChart4.setOption(option4);
			var option5 = myChart5.getOption();
			option5.xAxis[0].data = data.statistics_date;
			option5.series[0].data = data.avg_reply_time;
			myChart5.setOption(option5);
		}
		// 选项卡
		layui.use('element', function(){
		  var element = layui.element;
		  
		  //…
		});
		// 表单
		layui.use('form', function(){
			var form = layui.form;

		  //监听提交
		  form.on('submit(formDemo)', function(data){
		  	layer.msg(JSON.stringify(data.field));
		  	return false;
		  });
		});
		
		function getDays(strDateStart,strDateEnd){
		   var strSeparator = "-"; //日期分隔符
		   var oDate1;
		   var oDate2;
		   var iDays;
		   oDate1= strDateStart.split(strSeparator);
		   oDate2= strDateEnd.split(strSeparator);
		   var strDateS = new Date(oDate1[0], oDate1[1]-1, oDate1[2]);
		   var strDateE = new Date(oDate2[0], oDate2[1]-1, oDate2[2]);
		   iDays = parseInt(Math.abs(strDateS - strDateE ) / 1000 / 60 / 60 /24)//把相差的毫秒数转换为天数
		   return iDays ;
		}
		
		// 日期
		layui.use('laydate', function(){
			var laydate = layui.laydate;

			//执行一个laydate实例
			laydate.render({
				elem: '#test1' //指定元素
				,type: 'date'
				,max: -1 //最大1天前
				,showBottom: false
				,done: function(value, date, endDate){
					var endDate = $('#test2').val();
					var days = getDays(value,endDate);
					if(days >= 30){
						alert('支持的最大查询跨度为30天');
						return;
					}
					myAjaxPost(false, true, 'statistics.html', { type:'usedate',startDate:value,endDate:endDate}, function (resp) {
						if (resp.status == 'success') {
							var data = resp.data;
							edit_chart(data);
						}else{
							layer.msg(resp.msg);
						}
					});
				 }
			});
			//执行一个laydate实例
			laydate.render({
				elem: '#test2' //指定元素
				,type: 'date'
				,max: -1 //最大1天前
				,showBottom: false
				,done: function(value, date, endDate){
					var startDate = $('#test1').val();
					var days = getDays(startDate,value);
					if(days >= 30){
						alert('支持的最大查询跨度为30天');
						return;
					}
					myAjaxPost(false, true, 'statistics.html', { type:'usedate',endDate:value,startDate:startDate}, function (resp) {
						if (resp.status == 'success') {
							var data = resp.data;
							edit_chart(data);
						}else{
							layer.msg(resp.msg);
						}
					});
				 }
			});
		});
	</script>
	<script type="text/javascript">
		$(document).ready(function(){
			myAjaxPost(false, true, 'statistics.html', { type:'first'}, function (resp) {
				if (resp.status == 'success') {
					var data = resp.data;
					$('#yy_new_contact_cnt').html(data.new_contact_cnt[data.new_contact_cnt.length - 1]);
					$('#yy_negative_feedback_cnt').html(data.negative_feedback_cnt[data.new_contact_cnt.length - 1]);
					$('#test1').val(data.statistics_date[0]);
					$('#test2').val(data.statistics_date[data.statistics_date.length - 1]);
					edit_chart(data);
				}else{
					//layer.msg(resp.msg);
				}
			});
		});
		function one_week(){
			myAjaxPost(false, true, 'statistics.html', { type:'one_week'}, function (resp) {
				if (resp.status == 'success') {
					var data = resp.data;
					$('#test1').val(data.statistics_date[0]);
					$('#test2').val(data.statistics_date[data.statistics_date.length - 1]);
					edit_chart(data);
				}else{
					layer.msg(resp.msg);
				}
			});		
		}
		function two_week(){
			myAjaxPost(false, true, 'statistics.html', { type:'two_week'}, function (resp) {
				if (resp.status == 'success') {
					var data = resp.data;
					$('#test1').val(data.statistics_date[0]);
					$('#test2').val(data.statistics_date[data.statistics_date.length - 1]);
					edit_chart(data);
				}else{
					layer.msg(resp.msg);
				}
			});
		}
		function one_month(){
			myAjaxPost(false, true, 'statistics.html', { type:'one_month'}, function (resp) {
				if (resp.status == 'success') {
					var data = resp.data;
					$('#test1').val(data.statistics_date[0]);
					$('#test2').val(data.statistics_date[data.statistics_date.length - 1]);
					edit_chart(data);
				}else{
					layer.msg(resp.msg);
				}
			});
		}
	</script>
	<!-- 图表 -->
	<script type="text/javascript">
		var myChart1 = echarts.init(document.getElementById('main1'));
		// 指定图表的配置项和数据
		option1 = {
		    title: {
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    color:["#5b8ff9","#88e3bf","#5d7092"],
		    legend: {
		        data:['新增客户数','成员发起好友申请数','被客户删除拉黑数']
		    },
		    grid: {
		        left: '2%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: ['2020-06-29','2020-06-30','2020-07-01','2020-07-02','2020-07-03']
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [
		        {
		            name:'新增客户数',
		            type:'line',
		            //stack: '总量',
		            data:[0, 0, 0, 0, 0],
		            smooth: true,
		        },
		        {
		            name:'成员发起好友申请数',
		            type:'line',
		            //stack: '总量',
		            data:[0, 0, 0, 0, 0],
		            smooth: true
		        },
		        {
		            name:'被客户删除拉黑数',
		            type:'line',
		            //stack: '总量',
		            data:[0, 0, 0, 0, 0],
		            smooth: true
		        }
		       
		    ]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart1.setOption(option1);

		// 自适应
		window.addEventListener("resize",function (){
			myChart1.resize();
		});

    </script>
	<script type="text/javascript">
		var myChart2 = echarts.init(document.getElementById('main2'));
		// 指定图表的配置项和数据
		option2 = {
		    title: {
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    color:["#5b8ff9","#88e3bf","#5d7092"],
		    legend: {
		        data:['聊天总数']
		    },
		    grid: {
		        left: '2%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: ['2020-06-29','2020-06-30','2020-07-01','2020-07-02','2020-07-03']
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [
		        {
		            name:'聊天总数',
		            type:'line',
		            stack: '总量',
		            data:[0, 0, 0, 0, 0],
		            smooth: true,
		        }
		    ]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart2.setOption(option2);

		// 自适应
		window.addEventListener("resize",function (){
			myChart2.resize();
		});

    </script>
	<script type="text/javascript">
		var myChart3 = echarts.init(document.getElementById('main3'));
		// 指定图表的配置项和数据
		option3 = {
		    title: {
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    color:["#5b8ff9","#88e3bf","#5d7092"],
		    legend: {
		        data:['发消息数']
		    },
		    grid: {
		        left: '2%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: ['2020-06-29','2020-06-30','2020-07-01','2020-07-02','2020-07-03']
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [
		        {
		            name:'发消息数',
		            type:'line',
		            stack: '总量',
		            data:[0, 0, 0, 0, 0],
		            smooth: true,
		        }
		       
		    ]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart3.setOption(option3);

		// 自适应
		window.addEventListener("resize",function (){
			myChart3.resize();
		});

    </script>
	<script type="text/javascript">
		var myChart4 = echarts.init(document.getElementById('main4'));
		// 指定图表的配置项和数据
		option4 = {
		    title: {
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    color:["#5b8ff9","#88e3bf","#5d7092"],
		    legend: {
		        data:['已回复聊天占比']
		    },
		    grid: {
		        left: '2%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: ['2020-06-29','2020-06-30','2020-07-01','2020-07-02','2020-07-03']
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [
		        {
		            name:'已回复聊天占比',
		            type:'line',
		            stack: '总量',
		            data:[0, 0, 0, 0, 0],
		            smooth: true,
		        }
		       
		    ]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart4.setOption(option4);

		// 自适应
		window.addEventListener("resize",function (){
			myChart4.resize();
		});

    </script>
	<script type="text/javascript">
		var myChart5 = echarts.init(document.getElementById('main5'));
		// 指定图表的配置项和数据
		option5 = {
		    title: {
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    color:["#5b8ff9","#88e3bf","#5d7092"],
		    legend: {
		        data:['平均首次回复时长']
		    },
		    grid: {
		        left: '2%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: ['2020-06-29','2020-06-30','2020-07-01','2020-07-02','2020-07-03']
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [
		        {
		            name:'平均首次回复时长',
		            type:'line',
		            stack: '总量',
		            data:[0, 0, 0, 0, 0],
		            smooth: true,
		        }
		       
		    ]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart5.setOption(option5);

		// 自适应
		window.addEventListener("resize",function (){
			myChart5.resize();
		});

    </script>
</body>
</html>